import React, { Component } from 'react';
import { Calendar } from 'antd-mobile';
import { formatDate } from '@/assets/js/methods'
import "./OrderProgress.scss"
import "./Purchaseorder.scss"
const data = [
	{ num: '123465485', source: '自购', useraccount: '177****1324', money: '1800.00' },
	{ num: '123465485', source: '用户分销', useraccount: '177****1324', money: '1800.00' },
	{ num: '123465485', source: '销售分销', useraccount: '177****1324', money: '1800.00' },
]
const now = new Date();
class Salesorder extends Component {
	originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
	constructor() {
		super()
		this.state = {
			show: false,
			config: {
				type: 'one'
			},
		}
	}
	onSelectHasDisableDate = (dates) => {
		console.warn('onSelectHasDisableDate', dates);
	}

	onConfirm = (startTime) => {
		console.log(startTime.getTime())
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime: formatDate(startTime.getTime())
		});
	}

	onCancel = () => {
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime: undefined,
			endTime: undefined,
		});
	}
	componentDidMount() {
		document.getElementsByTagName('title')[0].innerHTML = '售卖订单中心'
		this.setState({
			startTime: formatDate(new Date().getTime())
		})
	}
	render() {
		let height = window.screen.height
		return (
			<div className="other-page OrderProgress purchaseorder" style={{ minHeight: height + 'px' }}>
				<div className="topbar flex y-center space-between">
					<span className="flex y-center">
						<span>日期选择:</span>
					</span>
					<span className="flex y-center">
						<span>{this.state.startTime}</span>
						<img src={require('../../images/calendar.png')}
							alt=""
							className="ml20"
							onClick={() => {
								document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
								this.setState({
									show: true
								});
							}} />
					</span>
				</div>

				<div className='tabbox'>
					<div>
						<div className='iconbox' style={{ backgroundColor: '#fea443' }}>
							<img src={require('../../images/icon1.png')} />
							<div className='redcircle'>5</div>
						</div>
						<span style={{ color: '#fea443' }}>已完成</span>
					</div>
					<div>
						<div className='iconbox'>
							<img src={require('../../images/icon2.png')} />
						</div>
						<span>购买历史订单</span>
					</div>
					<div>
						<div className='iconbox'>
							<img src={require('../../images/icon3.png')} />
						</div>
						<span>售后</span>
					</div>
				</div>

				<div className='caption border-b'>
					<div>订单编号</div>
					<div>来源</div>
					<div>用户账户</div>
					<div>金额</div>
				</div>
				<div className='content'>
					{
						data.map((item, index) => {
							return (
								<div
									className='item border-b'
									key={index}
									style={{ borderBottomWidth: index === data.length - 1 ? 0 : 1 }} >
									<div>{item.num}</div>
									<div>{item.source}</div>
									<div>{item.useraccount}</div>
									<div>{item.money}</div>
								</div>
							)
						})
					}
				</div>

				<Calendar
					{...this.state.config}
					visible={this.state.show}
					onCancel={this.onCancel}
					onConfirm={this.onConfirm}
					onSelectHasDisableDate={this.onSelectHasDisableDate}
					getDateExtra={this.getDateExtra}
					defaultDate={now}
					minDate={new Date(+now - 5184000000)}
					maxDate={new Date(+now + 31536000000)}
				/>
			</div>
		);
	}
}

export default Salesorder;